<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <FormItem label="登录账号" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入手机号"
              clearable
              style="width: 180px"
            />
          </FormItem>
          <FormItem label="用户姓名" prop="name">
            <Input
              type="text"
              v-model="searchForm.name"
              placeholder="请输入用户姓名"
              clearable
              style="width: 180px"
            />
          </FormItem>
          <FormItem label="驾驶车辆" prop="vehicleNum">
            <Input
              type="text"
              v-model="searchForm.vehicleNum"
              placeholder="请输入驾驶车辆"
              clearable
              style="width: 180px"
            />
          </FormItem>
          <br />
          <FormItem label="认证状态">
            <Select placeholder="请选择认证状态" v-model="searchForm.registStatus" style="width: 180px">
              <Option value="">全部</Option>
              <Option value="0">未认证</Option>
              <Option value="1">已认证</Option>
              <Option value="2">待审核</Option>
              <Option value="3">已过期</Option>
            </Select>
          </FormItem>
          <span style="margin-left: 35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
            <Button @click="getDataList" icon="md-refresh">刷新</Button>
            <!-- <Button @click="newDrier" type="primary" icon="md-add"
              >新增驾驶员</Button
            > -->
            <!-- <Button @click="exportSelectData" icon="md-cloud-upload"
              >导出所选数据</Button
            > -->
          </span>
        </Form>
      </Row>
      <!--  -->
      <Tabs type="card">
        <TabPane label="车主">
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              :data="data"
              ref="table"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="changeSelect"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
            transfer
              :current="searchForm.pageNumber"
              :total="total"
              :page-size="searchForm.pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
        <TabPane label="个体户">
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              :data="data"
              ref="table"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="changeSelect"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
            transfer
              :current="searchForm.pageNumber"
              :total="total"
              :page-size="searchForm.pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
        <TabPane label="运输公司">
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              :data="data"
              ref="table"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="changeSelect"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
            transfer
              :current="searchForm.pageNumber"
              :total="total"
              :page-size="searchForm.pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
      </Tabs>

      <!-- 自定义导出数据 -->
      <Modal
        v-model="exportModalVisible"
        :title="exportTitle"
        :loading="loadingExport"
        @on-ok="exportCustomData"
      >
        <Form ref="exportForm" :label-width="100">
          <FormItem label="导出文件名">
            <Input v-model="filename" />
          </FormItem>
          <FormItem label="自定义导出列">
            <CheckboxGroup v-model="chooseColumns">
              <Checkbox
                v-for="(item, i) in exportColumns"
                :label="item.title"
                :key="i"
                :value="item.checked"
                :disabled="item.disabled"
              ></Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem label="备注">
            <Input
              v-model="exportRemarks"
              placeholder="备注"
              style="width: 300px"
            />
          </FormItem>
        </Form>
      </Modal>
      <!-- 车辆详情 -->
      <VehicleDetails
        @VehicleDetailsEnd="VehicleDetailsEnd"
        :VehicleDetailsId="VehicleDetailsId"
        :VehicleDetailsModalue="this.VehicleDetailsModalue"
      >
      </VehicleDetails>
    </Card>

    <Drawer
      title="驾驶员认证信息"
      :mask-closable="false"
      v-model="driverVisible"
      width="630"
    >
      <div class="demo-spin-article">
        <Tabs @on-click="driverTabs" v-model="driverTabPane">
          <TabPane label="身份证" name="name1">
            <div style="width: 100%; height: 15px"></div>
            <Form
              :model="idCardIdForm"
              :rules="RealAuthentication"
              ref="idCardIdForm"
              :label-width="90"
              inline
            >
              <FormItem label="真实姓名" prop="name">
                <Input
                  style="width: 195px"
                  placeholder="请输入真实姓名"
                  v-model="idCardIdForm.name"
                  clearable
                />
              </FormItem>
              <FormItem label="身份证号" prop="num">
                <Input
                  style="width: 195px"
                  placeholder="请输入身份证号"
                  v-model="idCardIdForm.num"
                  clearable
                />
              </FormItem>
              <FormItem label="出生日期" prop="birth">
                <Input
                  style="width: 195px"
                  placeholder="请输入出生日期"
                  v-model="idCardIdForm.birth"
                  clearable
                />
              </FormItem>
              <FormItem label="性别" prop="sex">
                <Input
                  style="width: 195px"
                  placeholder="请输入性别"
                  v-model="idCardIdForm.sex"
                  clearable
                />
              </FormItem>
              <FormItem label="开始时间" prop="startDate">
                <Input
                  style="width: 195px"
                  placeholder="请输入开始时间"
                  v-model="idCardIdForm.startDate"
                  clearable
                />
              </FormItem>
              <FormItem label="截至时间" prop="endDate">
                <Input
                  style="width: 195px"
                  placeholder="请输入截至时间"
                  v-model="idCardIdForm.endDate"
                  clearable
                />
              </FormItem>
              <FormItem label="家庭地址" prop="address">
                <Input
                  style="width: 264%"
                  placeholder="请输入家庭地址"
                  v-model="idCardIdForm.address"
                  clearable
                />
              </FormItem>
              <Row style="margin-left: 8px">
                <Col span="8">
                  <div class="demo-upload-list-driver">
                    <img
                      v-if="idCardFontPicFileUrl != ''"
                      style="width: 58px"
                      height="100px"
                      :src="idCardFontPicFileUrl"
                    />
                    <img
                      v-else
                      style="width: 58px"
                      height="100px"
                      src="@/assets/vehicleAtes/owner1.png"
                    />
                    <div
                      v-if="idCardFontPicFileUrl != ''"
                      class="demo-upload-list-driver-cover"
                    >
                      <Icon
                        type="ios-eye-outline"
                        @click.native="showPic(idCardFontPicFileUrl)"
                      ></Icon>
                    </div>
                  </div>
                  <Upload
                    :on-progress="FrontIDCard"
                    :beforeUpload="beforeUpload"
                    ref="fontUpload"
                    :show-upload-list="false"
                    :on-success="cardFontHandleSuccess"
                    :format="['jpg', 'jpeg', 'png']"
                    :on-format-error="handleFormatError"
                    :headers="header"
                    :data="{
                      fileType: 'IDCARD_FONT_PIC',
                      userId: form.userId,
                    }"
                    type="drag"
                    :action="uploadIdCardPic"
                    style="display: inline-block; width: 30px"
                  >
                    <div style="width: 30px; height: 30px; line-height: 30px">
                      <Icon type="ios-camera" size="20"></Icon>
                    </div>
                  </Upload>
                  <div class="demo-uploadcss-drivre">
                    <template>
                      <Progress
                        v-if="FrontIDCardTrue"
                        text-inside
                        :percent="load"
                        :stroke-width="3"
                      ></Progress>
                    </template>
                  </div>
                  <div style="margin-top: 8px" class="check">
                    <span class="check_font">身份证正面</span>
                  </div>
                </Col>
                <Col span="8" push="1">
                  <div class="demo-upload-list-driver">
                    <img
                      v-if="idCardBackPicFileUrl != ''"
                      style="width: 58px"
                      height="100px"
                      :src="idCardBackPicFileUrl"
                    />
                    <img
                      v-else
                      style="width: 58px"
                      height="100px"
                      src="@/assets/vehicleAtes/owner2.png"
                    />
                    <div
                      v-if="idCardBackPicFileUrl != ''"
                      class="demo-upload-list-driver-cover"
                    >
                      <Icon
                        type="ios-eye-outline"
                        @click.native="showPic(idCardBackPicFileUrl)"
                      ></Icon>
                    </div>
                  </div>
                  <div slot="label" class="check">身份证背面</div>
                  <Upload
                    :on-progress="ReverseSideIDCard"
                    :beforeUpload="beforeUpload"
                    ref="backUpload"
                    :show-upload-list="false"
                    :on-success="cardBackHandleSuccess"
                    :before-upload="handleBeforeUpload"
                    :format="['jpg', 'jpeg', 'png']"
                    :on-format-error="handleFormatError"
                    type="drag"
                    :default-file-list="idCardBackPicFileList"
                    :headers="header"
                    :data="{
                      fileType: 'IDCARD_BACK_PIC',
                      userId: form.userId,
                    }"
                    :action="uploadIdCardPic"
                    style="display: inline-block; width: 30px"
                  >
                    <div style="width: 30px; height: 30px; line-height: 30px">
                      <Icon type="ios-camera" size="20"></Icon>
                    </div>
                  </Upload>
                  <div class="demo-uploadcss-drivre">
                    <template>
                      <Progress
                        v-if="ReverseSideIDCardTrue"
                        text-inside
                        :percent="load"
                        :stroke-width="3"
                      ></Progress>
                    </template>
                  </div>
                  <div style="margin-top: 8px" class="check">
                    <span class="check_font">身份证背面 </span>
                  </div>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Button
                    style="margin-left: 8px; margin-top: 20px"
                    type="warning"
                    :loading="loadinIdcardInfo"
                    @click="submitIdcardInfo"
                    >保存资料</Button
                  >
                </Col>
              </Row>
            </Form>
          </TabPane>
          <TabPane label="驾驶证" name="name2">
            <div style="width: 100%; height: 15px"></div>
            <Form
              :model="driverLicenseForm"
              :rules="DriverCertification"
              ref="driverLicenseForm"
              :label-width="83"
              inline
            >
              <FormItem label="真实姓名" prop="name">
                <Input
                  style="width: 195px"
                  placeholder="请输入真实姓名"
                  v-model="driverLicenseForm.name"
                  clearable
                />
              </FormItem>

              <FormItem label="驾驶证号" prop="num">
                <Input
                  style="width: 195px"
                  placeholder="请输入驾驶证号"
                  v-model="driverLicenseForm.num"
                  clearable
                />
              </FormItem>

              <FormItem label="准驾车型" prop="driverType">
                <Input
                  style="width: 195px"
                  placeholder="请输入准驾车型"
                  v-model="driverLicenseForm.driverType"
                  clearable
                />
              </FormItem>

              <FormItem label="领证日期" prop="issueDate">
                <Input
                  style="width: 195px"
                  placeholder="请输入领证日期"
                  v-model="driverLicenseForm.issueDate"
                  clearable
                />
              </FormItem>
              <FormItem label="开始时间" prop="startDate">
                <Input
                  style="width: 195px"
                  placeholder="请输入开始时间"
                  v-model="driverLicenseForm.startDate"
                  clearable
                />
              </FormItem>
              <FormItem label="截至时间" prop="endDate">
                <Input
                  style="width: 195px"
                  placeholder="请输入截至时间"
                  v-model="driverLicenseForm.endDate"
                  clearable
                />
              </FormItem>
              <FormItem label="发证机关" prop="issuingOrganizations">
                <Input
                  style="width: 264%"
                  placeholder="请输入发证机关"
                  v-model="driverLicenseForm.issuingOrganizations"
                  clearable
                />
              </FormItem>
              <Row style="margin-left: 10px">
                <Col span="8">
                  <div class="demo-upload-list-driver">
                    <img
                      v-if="driverFontPicFileUrl != ''"
                      style="width: 58px"
                      height="100px"
                      :src="driverFontPicFileUrl"
                    />
                    <img
                      v-else
                      style="width: 58px"
                      height="100px"
                      src="@/assets/vehicleAtes/drier3.png"
                    />
                    <div
                      v-if="driverFontPicFileUrl != ''"
                      class="demo-upload-list-driver-cover"
                    >
                      <Icon
                        type="ios-eye-outline"
                        @click.native="showPic(driverFontPicFileUrl)"
                      ></Icon>
                    </div>
                  </div>

                  <Upload
                    :on-progress="DriverLicense"
                    :beforeUpload="beforeUpload"
                    ref="fontUpload"
                    :show-upload-list="false"
                    :on-success="driverFontHandleSuccess"
                    :format="['jpg', 'jpeg', 'png']"
                    :on-format-error="handleFormatError"
                    :headers="header"
                    :data="{
                      fileType: 'DRIVER_FONT_PIC',
                      userId: form.userId,
                    }"
                    type="drag"
                    :action="upLoadDriverLicense"
                    style="display: inline-block; width: 30px"
                  >
                    <div style="width: 30px; height: 30px; line-height: 30px">
                      <Icon type="ios-camera" size="20"></Icon>
                    </div>
                  </Upload>
                  <div class="demo-uploadcss-drivre">
                    <template>
                      <Progress
                        v-if="DriverLicenseTrue"
                        text-inside
                        :percent="load"
                        :stroke-width="3"
                      ></Progress>
                    </template>
                  </div>

                  <div style="margin-top: 8px" class="check">
                    <span class="check_font">驾照主页</span>
                  </div>
                </Col>
                <Col span="8" push="1">
                  <div class="demo-upload-list-driver">
                    <img
                      v-if="driverBackPicFileUrl != ''"
                      style="width: 58px"
                      height="100px"
                      :src="driverBackPicFileUrl"
                    />
                    <img
                      v-else
                      style="width: 58px"
                      height="100px"
                      src="@/assets/vehicleAtes/drier4.png"
                    />
                    <div
                      v-if="driverBackPicFileUrl != ''"
                      class="demo-upload-list-driver-cover"
                    >
                      <Icon
                        type="ios-eye-outline"
                        @click.native="showPic(driverBackPicFileUrl)"
                      ></Icon>
                    </div>
                  </div>
                  <Upload
                    :on-progress="DriverLicenPage"
                    :beforeUpload="beforeUpload"
                    ref="backUpload"
                    :show-upload-list="false"
                    :on-success="driverBackHandleSuccess"
                    :before-upload="handleBeforeUpload"
                    :format="['jpg', 'jpeg', 'png']"
                    :on-format-error="handleFormatError"
                    type="drag"
                    :default-file-list="idCardBackPicFileList"
                    :headers="header"
                    :data="{
                      fileType: 'DRIVER_BACK_PIC',
                      userId: form.userId,
                    }"
                    :action="upLoadDriverLicense"
                    style="display: inline-block; width: 30px"
                  >
                    <div style="width: 30px; height: 30px; line-height: 30px">
                      <Icon type="ios-camera" size="20"></Icon>
                    </div>
                  </Upload>
                  <div class="demo-uploadcss-drivre">
                    <template>
                      <Progress
                        v-if="DriverLicenPageTrue"
                        text-inside
                        :percent="load"
                        :stroke-width="3"
                      ></Progress>
                    </template>
                  </div>
                  <div style="margin-top: 8px" class="check">
                    <span class="check_font">驾照副页</span>
                  </div>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Button
                    style="margin-left: 8px; margin-top: 20px"
                    type="warning"
                    @click="submitDriverInfo"
                    :loading="loadinDriverInfo"
                    >保存资料</Button
                  >
                </Col>
              </Row>
            </Form>
          </TabPane>
          <TabPane label="从业资格证" name="name3">
            <div style="width: 100%; height: 15px"></div>
            <Form
              :model="workLicenseForm"
              :rules="qualificationCation"
              ref="workLicenseForm"
              :label-width="110"
              inline
            >
              <FormItem label="从业资格证号" prop="workLicenseNo">
                <Input
                  style="width: 175px"
                  placeholder="请输入从业资格证号"
                  v-model="workLicenseForm.workLicenseNo"
                  clearable
                />
              </FormItem>
              <FormItem label="资格证有效期" prop="workLicenseExpiryTime">
                <DatePicker
                  type="date"
                  style="width: 175px"
                  format="yyyyMMdd"
                  placeholder="请选择资格证有效期"
                  :value="workLicenseForm.workLicenseExpiryTime"
                  @on-change="workLicenseEndDate"
                ></DatePicker>
              </FormItem>
              <Row>
                <Col span="20" style="margin-left: 12px">
                  <div class="demo-upload-list-driver">
                    <img
                      v-if="workLicensePicFileUrl != ''"
                      style="width: 58px"
                      height="100px"
                      :src="workLicensePicFileUrl"
                    />
                    <img
                      v-else
                      style="width: 58px"
                      height="100px"
                      src="@/assets/vehicleAtes/owner5.png"
                    />
                    <div
                      v-if="workLicensePicFileUrl != ''"
                      class="demo-upload-list-driver-cover"
                    >
                      <Icon
                        type="ios-eye-outline"
                        @click.native="showPic(workLicensePicFileUrl)"
                      ></Icon>
                    </div>
                  </div>
                  <Upload
                    :on-progress="QualificationCertificate"
                    :beforeUpload="beforeUpload"
                    ref="companyUpload"
                    :show-upload-list="false"
                    :on-success="workLicenesSuccess"
                    :format="['jpg', 'jpeg', 'png']"
                    :on-format-error="handleFormatError"
                    :headers="header"
                    :data="{
                      fileType: 'DRIVER_WORK_PIC',
                      userId: form.userId,
                    }"
                    type="drag"
                    :action="upLoadWorkLicense"
                    style="display: inline-block; width: 30px"
                  >
                    <div style="width: 30px; height: 30px; line-height: 30px">
                      <Icon type="ios-camera" size="20"></Icon>
                    </div>
                  </Upload>
                  <div class="demo-uploadcss-drivre">
                    <template>
                      <Progress
                        v-if="QualificationTrue"
                        text-inside
                        :percent="load"
                        :stroke-width="3"
                      ></Progress>
                    </template>
                  </div>
                  <div style="margin-top: 8px" class="check">
                    <span class="check_font">从业资格证</span>
                  </div>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Button
                    style="margin-left: 8px; margin-top: 20px"
                    type="warning"
                    @click="submitWorkLicenseInfo"
                    :loading="loadinWorkLicenseInfo"
                    >保存资料</Button
                  >
                </Col>
              </Row>
            </Form>
          </TabPane>
        </Tabs>
        <div
          class="demo-drawer-footer-drivle"
          v-if="this.driverRegistStatus == 2"
        >
          <div style="display: flex; justify-content: space-between">
            <div
              v-if="form.completeCertificates == 1"
              class="popover-Tagdrverr"
            >
              <el-popover
                placement="top"
                ref="popoverSH"
                title=""
                width="100%"
                style="padding: 2px"
                trigger="click"
                content=""
              >
                <Tag slot="reference" color="red">
                  <span>存在缺失</span>
                </Tag>
                <div>
                  <span>
                    <span
                      ><Icon style="color: red" type="md-close-circle" />
                    </span>
                    <span style="margin-left: 5px">缺失信息</span>
                  </span>
                  <div class="MissingLinx"></div>
                  <div
                    v-if="
                      form.informationTips == null || form.informationTips == ''
                    "
                    class="popoverDiv"
                  >
                    缺失信息为空，可能存在错误！
                  </div>
                  <div
                    v-else
                    class="popoverDiv"
                    v-for="(item, index) in form.informationTipsVehicle"
                    :key="index"
                  >
                    {{ index + 1 }}. {{ item }}<br />
                  </div>
                </div>
              </el-popover>
            </div>
            <div class="popover-Tagdrverr" v-else>
              <Tag
                :color="form.completeCertificates == 2 ? 'green' : 'default'"
              >
                <span>{{
                  form.completeCertificates == 2 ? "要素完整" : "要素异常"
                }}</span>
              </Tag>
            </div>
            <div>
              <Button type="primary" @click="adoptDriverCertificateInformation"
                >审核通过</Button
              >
              &nbsp;
              <Button type="error" @click="repulseDriverCertificateInformation"
                >审核不通过</Button
              >
            </div>
          </div>
        </div>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </div>
    </Drawer>
    <!-- 审核不审核通过 -->
    <Modal v-model="auditFailedModal" title="审核不通过">
      <span style="font-size: 15px">
        {{ confirmRejection }}
      </span>
      <Input
        style="margin-top: 10px"
        v-model="AuditFailedInput"
        type="textarea"
        :rows="4"
        placeholder="请输入审核不通过原因"
      />
      <div slot="footer">
        <Button @click="auditFailedModal = false">取消</Button>
        <Button
          :loading="loadingbut"
          type="primary"
          @click="auditRejectDetermine"
          >确定</Button
        >
      </div>
    </Modal>
    <addDriver
      :data="form"
      :type="showType"
      v-model="showUser"
      @on-submit="getDataList"
    />
  </div>
</template>
<script>
// 根据你的实际请求api.js位置路径修改
import VehicleDetails from "@/views/componentsonn_source_goods/VehicleDetails";
import { getDriverVoList } from "@/api/user";
// 根据你的实际添加编辑组件位置路径修改
import { disableUser, enableUser, addDownloadRecord } from "@/api/index";
import excel from "@/libs/excel";
////////////////////////////////////////////////////////
import {
  saveIdCardInfo,
  saveDriverLicenseInfo,
  saveWorkLicenseInfo,
  getIdCarDInfo,
  getDriverLicenseInfo,
  getWorkLicenseInfo,
} from "@/api/user";

import {
  uploadIdCardPic,
  uploadVehiclePic,
  upLoadDriverLicense,
  upLoadWorkLicense,
} from "@/api/index";
import { getStore } from "@/libs/storage";
import * as imageConversion from "image-conversion";
// 根据你的实际请求api.js位置路径修改
import { updateRegistStatus } from "@/api/user";
// 新增驾驶员
import addDriver from "./addDriver.vue";
export default {
  name: "driverInfo",
  data() {
    return {
      auditFailedModal: false, // 审核不通过
      confirmRejection: "",
      AuditFailedInput: "",
      loadingbut: false,

      spinShow: false,
      //新增驾驶员
      showUser: false,
      showType: "0",

      VehicleDetailsId: "", //车辆id
      VehicleDetailsModalue: false, //车辆详情弹框
      openSearch: true, // 显示搜索
      openTip: true, // 显示提示
      showType: "0", // 添加或编辑标识
      showDrawer: false, // 显示添加编辑抽屉
      loading: true, // 表单加载状态
      drop: false,
      dropDownContent: "展开",
      dropDownIcon: "ios-arrow-down",
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        name: "",
        vehicleNum: "",
        mobile: "",
        registStatus: "", //默认查全部
      },
      form: {},
      exportModalVisible: false, // 自定义导出显示
      exportData: [], // 多选数据
      exportTitle: "确认导出",
      filename: "驾驶员数据",
      loadingExport: true, // 导出加载状态\
      chooseColumns: [],
      exportRemarks: "",
      exportColumns: [
        {
          title: "#",
          key: "serialNumber",
          minWidth: 60,
          sortable: true,
        },
        {
          title: "认证状态",
          key: "exportRegistStatus",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "状态",
          key: "exportStatus",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "登录账号",
          key: "mobile",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "用户名",
          key: "name",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "性别",
          key: "sex",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "年龄",
          key: "birth",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "身份证号",
          key: "num",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "准驾车型",
          key: "driverType",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "驾驶车辆",
          key: "vehicleNum",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "家庭地址",
          key: "address",
          minWidth: 100,
          sortable: true,
        },

        {
          title: "更新时间",
          key: "updateTime",
          minWidth: 100,
          sortable: true,
        },
      ],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "#",
          type: "index",
          width: 60,
        },
        {
          title: "状态",
          key: "status",
          // align: "center",
          width: 100,
          render: (h, params) => {
            if (params.row.status == 0) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "success",
                    text: "启用",
                  },
                }),
              ]);
            } else if (params.row.status == -1) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "error",
                    text: "禁用",
                  },
                }),
              ]);
            }
          },
          filters: [
            {
              label: "启用",
              value: 0,
            },
            {
              label: "禁用",
              value: -1,
            },
          ],
          filterMultiple: false,
          filterRemote: (e) => {
            let v = "";
            if (e.length > 0) {
              v = e[0];
            }
            this.searchForm.status = v;
            this.searchForm.pageNumber = 1;
            this.getDataList();
          },
        },
        {
          title: "头像",
          key: "avatar",
          width: 80,
          // align: "center",
          render: (h, params) => {
            let avatarUrl = "";
            if (
              params.row.avatar ==
              "https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png"
            ) {
              avatarUrl = "https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png";
            } else if (params.row.avatar == "" || params.row.avatar == null) {
              avatarUrl = "https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png";
            } else {
              avatarUrl =
                this.$baseUrl +
                "/freight/file/view/" +
                params.row.avatar +
                "?accessToken=" +
                this.accessToken +
                "&preview=true";
            }
            return h("Avatar", {
              props: {
                src: avatarUrl,
              },
            });
          },
        },
        {
          title: "登录账号",
          key: "mobile",
          minWidth: 125,
          sortable: false,
        },
        {
          title: "用户名",
          key: "name",
          minWidth: 100,
          sortable: false,
        },
        {
          title: "性别",
          key: "sex",
          minWidth: 80,
          sortable: false,
        },
        {
          title: "年龄",
          key: "birth",
          minWidth: 80,
          sortable: false,
          render: (h, params) => {
            if (params.row.birth) {
              let year = new Date().getFullYear();
              let now = Number(params.row.birth.substring(0, 4));
              return h("div", year - now);
            }
          },
        },
        {
          title: "身份证号",
          key: "num",
          minWidth: 190,
          sortable: false,
        },
        {
          title: "准驾车型",
          key: "driverType",
          minWidth: 100,
          sortable: false,
        },
        {
          title: "驾驶车辆",
          key: "vehicleNum",
          minWidth: 120,
          render: (h, params) => {
            if (params.row.vehicleNum == "" || params.row.vehicleNum == null) {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未绑定"
              );
            } else {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.LookVehicleInfo(params.row);
                      },
                    },
                  },
                  params.row.vehicleNum
                ),
              ]);
            }
          },
        },
        // {
        //   title: "驾驶证有效期",
        //   key: "endDate",
        //   minWidth: 130,
        //   sortable: false,
        //   render:(h,params)=>{
        //     if(params.row.endDate){
        //       let val = params.row.endDate
        //       let arr = val.split('-')
        //       let text = arr[0] + arr[1] + arr[2]
        //       return h('div',text)
        //     }
        //   }
        // },
        // {
        //   title: "资格证有效期",
        //   key: "workLicenseExpiryTime",
        //   minWidth: 130,
        //   sortable: false,
        //   render:(h,params)=>{
        //     if(params.row.endDate){
        //       let val = params.row.workLicenseExpiryTime
        //       let arr = val.split('-')
        //       let text = arr[0] + arr[1] + arr[2]
        //       return h('div',text)
        //     }
        //   }
        // },
        {
          title: "家庭地址",
          key: "address",
          minWidth: 250,
          sortable: false,
          tooltip: true,
        },
        // {
        //   title: "归属车队",
        //   key: "describeInfo",
        //   minWidth: 220,
        //   sortable: false,
        //   render:(h,params)=>{
        //     let text = params.row.describeInfo
        //     if(!text){
        //       text = '无'
        //     }
        //     return h('div',text)
        //   }
        // },
        {
          title: "更新时间",
          key: "updateTime",
          minWidth: 180,
          sortable: false,
        },
        {
          title: "认证状态",
          key: "registStatus",
          minWidth: 100,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let colorStatus = "";
            let titleText = "";
            if (params.row.registStatus == 0) {
              colorStatus = "error";
              titleText = "未认证";
            } else if (params.row.registStatus == 1) {
              colorStatus = "success";
              titleText = "已认证";
            } else if (params.row.registStatus == 2) {
              colorStatus = "processing";
              titleText = "待审核";
            } else if (params.row.registStatus == 3) {
              colorStatus = "error";
              titleText = "已过期";
            }
            return h("div", [
              h("Badge", {
                props: {
                  status: colorStatus,
                  text: titleText,
                },
              }),
            ]);
          },
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          fixed: "right",
          width: 120,
          render: (h, params) => {
            if (params.row.status == 0) {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.edit(params.row);
                      },
                    },
                  },
                  "查看"
                ),
                h("Divider", {
                  props: {
                    type: "vertical",
                  },
                }),
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.frozen(params.row);
                      },
                    },
                  },
                  "禁用"
                ),
                //
              ]);
            } else if (params.row.status == -1) {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.edit(params.row);
                      },
                    },
                  },
                  "审核"
                ),
                h("Divider", {
                  props: {
                    type: "vertical",
                  },
                }),
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.Enable(params.row);
                      },
                    },
                  },
                  "启用"
                ),
                //
              ]);
            }
          },
        },
      ],
      data: [], // 表单数据
      pageNumber: 1, // 当前页数
      pageSize: 10, // 页面大小
      total: 0, // 表单数据总数
      ////////////////////////////////////////////////////////////////////////////////
      driverVisible: false,
      load: 0, // 动态显示进度条
      FrontIDCardTrue: false, // 关闭进度条
      ReverseSideIDCardTrue: false, // 关闭进度条
      DriverLicenseTrue: false, // 关闭进度条
      DriverLicenPageTrue: false, // 关闭进度条
      QualificationTrue: false, // 关闭进度条
      loadinIdcardInfo: false,
      loadinDriverInfo: false,
      loadinWorkLicenseInfo: false,

      uploadIdCardPic: uploadIdCardPic,
      uploadVehiclePic: uploadVehiclePic,
      upLoadDriverLicense: upLoadDriverLicense,
      upLoadWorkLicense: upLoadWorkLicense,
      visible: this.value,
      imgVisible: false,

      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      title: "",
      idCardIdForm: {
        name: "", //名字
        num: "", //身份证号
        address: "", //居住地址
        birth: "", //生日
        sex: "", //性别
        nationality: "", //籍贯
        startDate: "", //身份证开始有效期
        endDate: "", //身份证结束有效期
        issue: "", //发证机关
        idCardFontPicFileId: "", //身份证正面照ID
        idCardBackPicFileId: "", //身份证背面照ID
      },
      RealAuthentication: {
        name: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: "blur",
          },
        ],
        birth: [
          {
            required: true,
            message: "请输入出生日期",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入家庭地址",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请输入性别",
            trigger: "blur",
          },
        ],
        startDate: [
          {
            required: true,
            message: "请输入开始时间",
            trigger: "blur",
          },
        ],
        endDate: [
          {
            required: true,
            message: "请输入有效截至时间",
            trigger: "blur",
          },
        ],
      },

      driverLicenseForm: {
        name: "", //名字
        num: "", //驾驶证号
        sex: "", //性别
        driverType: "", //准驾车型
        startDate: "", //开始有效期
        endDate: "", //结束有限期
        issueDate: "", //初次领证日期
        addr: "", //详细地址
        archiveNo: "", //档案编号
        driverFontPicFileID: "", //驾驶证主页ID
        driverBackPicFileID: "", //驾驶证副页ID
        issuingOrganizations: "", //驾驶证发证机关
      },
      DriverCertification: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入驾驶证号",
            trigger: "blur",
          },
        ],
        driverType: [
          {
            required: true,
            message: "请输入准驾车型",
            trigger: "blur",
          },
        ],
        issueDate: [
          {
            required: true,
            message: "请输入领证日期",
            trigger: "blur",
          },
        ],
        issuingOrganizations: [
          {
            required: true,
            message: "请输入发证机关",
            trigger: "blur",
          },
        ],
        addr: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        startDate: [
          {
            required: true,
            message: "请输入开始时间",
            trigger: "blur",
          },
        ],
        endDate: [
          {
            required: true,
            message: "请输入有效截至时间",
            trigger: "blur",
          },
        ],
      },
      workLicenseForm: {
        workLicenseNo: "", //从业资格证号
        workLicensePicFileId: "", //从业资格证ID
        workLicenseExpiryTime: "", //从业资格证有效期
        workLicenseExpiryTimes: "",
      },
      qualificationCation: {
        workLicenseNo: [
          {
            required: true,
            message: "请输入从业资格证号",
            trigger: "blur",
          },
        ],
        workLicenseExpiryTime: [
          {
            required: true,
            message: "请选择资格证有效期",
            trigger: "change",
          },
        ],
        // workLicensePicFileId: [
        //   {
        //     required: true,sds
        //     message: "请输入从业资格文件",
        //     trigger: "blur",
        //   },
        // ],
      },

      submitLoading: false,
      maxHeight: 510,
      activeSrc: "",
      idCardFontPicFileUrl: "",
      driverRegistStatus: "",
      idCardBackPicFileUrl: "",
      driverFontPicFileUrl: "",
      driverBackPicFileUrl: "",
      workLicensePicFileUrl: "",
      vehicleFontPicFileUrl: "",
      vehicleBackPicFileUrl: "",
      trailerFontPicFileUrl: "",
      trailerBackPicFileUrl: "",
      vehicleWorkPicFileUrl: "",
      trailerWorkPicFileUrl: "",
    };
  },
  components: {
    VehicleDetails,
    addDriver,
  },
  methods: {
    // 新增驾驶员
    newDrier() {
      this.showType = "2";
      this.showUser = true;
    },
    init() {
      this.getDataList();
      // 初始化导出列数据
      let array = [];
      this.exportColumns.forEach((e) => {
        // 指定列限制权限
        if (
          !this.getStore("roles").includes("ROLE_ADMIN") &&
          e.key == "mobile"
        ) {
          e.title = "[无权导出] " + e.title;
          e.disabled = true;
        } else {
          e.disabled = false;
        }
        array.push(e.title);
      });
      this.chooseColumns = array;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      // this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.vehicleNum = "";
      this.searchForm.registStatus = "";
      this.searchForm.mobile = "";
      this.searchForm.name = "";
      // 重新加载数据
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "ios-arrow-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "ios-arrow-up";
      }
      this.drop = !this.drop;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    getDataList() {
      this.loading = true;
      getDriverVoList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },
    changeSelect(e) {
      this.exportData = e;
      this.exportData.forEach((item, index) => {
        // 序号
        item.serialNumber = index + 1;
        // 认证状态
        if (item.registStatus == 0) {
          item.exportRegistStatus = "未认证";
        } else if (item.registStatus == 1) {
          item.exportRegistStatus = "已认证";
        } else if (item.registStatus == 2) {
          item.exportRegistStatus = "待审核";
        } else if (item.registStatus == 3) {
          item.exportRegistStatus = "已过期";
        }
        // 状态
        if (item.status == 0) {
          item.exportStatus = "启用";
        } else if (item.status == -1) {
          item.exportStatus = "禁用";
        }
        // 年龄
        if (item.birth) {
          let year = new Date().getFullYear();
          let now = Number(item.birth.substring(0, 4));
          item.birth = year - now;
        }
        // 驾驶车辆
        if (item.vehicleNum) {
          item.vehicleNum = item.vehicleNum;
        } else {
          item.vehicleNum = "未绑定";
        }
      });
    },
    exportSelectData() {
      if (this.exportData.length <= 0) {
        this.$Message.warning("您还未选择要导出的数据");
        return;
      }
      this.exportType = "part";
      this.exportModalVisible = true;
      this.exportTitle = "确认导出 " + this.exportData.length + " 条数据";
    },
    exportCustomData() {
      // 上传记录
      let param = new FormData(); // 创建form对象
      // param.append("file", a); // 通过append向form对象添加数据
      param.append("fileName", this.filename); // 添加form表单中其他数据
      param.append("fileType", 1); // 通过append向form对象添加数据
      param.append("remarks", this.exportRemarks); // 添加form表单中其他数据
      addDownloadRecord(param).then((res) => {
        if (res.code == 200) {
          // 判断勾选导出列
          let array = [];
          this.exportColumns.forEach((e) => {
            this.chooseColumns.forEach((c) => {
              if (e.title == c && !e.disabled) {
                array.push(e);
              }
            });
          });
          let filename = res.result + " " + this.filename;
          this.exportColumns = array;
          this.exportModalVisible = false;
          let title = [];
          let key = [];
          this.exportColumns.forEach((e) => {
            title.push(e.title);
            key.push(e.key);
          });
          const params = {
            title: title,
            key: key,
            data: this.exportData,
            autoWidth: true,
            filename: filename,
          };
          excel.export_array_to_excel(params);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    add() {
      this.showType = "2";
      this.showDrawer = true;
    },
    edit(v) {
      this.spinShow = true;
      this.driverRegistStatus = v.registStatus;
      this.idCardFontPicFileUrl = ""; //身份证正面
      this.idCardBackPicFileUrl = ""; //身份证返面
      this.driverFontPicFileUrl = ""; //驾照主页
      this.driverBackPicFileUrl = ""; //驾照副页
      this.workLicensePicFileUrl = ""; //从业资格证
      this.$refs.idCardIdForm.resetFields();
      this.$refs.driverLicenseForm.resetFields();
      this.$refs.workLicenseForm.resetFields();
      this.driverVisible = true;
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      this.form = data;
      this.showType = "1";
      if (
        this.form.informationTips != "" &&
        this.form.informationTips != null
      ) {
        if (
          this.form.informationTips.charAt(
            this.form.informationTips.length - 1
          ) == ","
        ) {
          this.form.informationTips = this.form.informationTips.substring(
            0,
            this.form.informationTips.lastIndexOf(",")
          );
        }
        this.form.informationTipsVehicle = this.form.informationTips.split(",");
      } else {
        this.form.informationTipsVehicle = this.form.informationTips;
      }
      // 实名认证
      getIdCarDInfo({ userId: this.form.userId }).then((res) => {
        if (res.success) {
          if (res.result.id != null) {
            this.idCardIdForm = res.result;
            this.idCardIdForm.startDate =
              res.result.startDate == null
                ? ""
                : res.result.startDate.replaceAll("-", "");
            this.idCardIdForm.endDate =
              res.result.endDate == null
                ? ""
                : res.result.endDate.replaceAll("-", "");
            if (this.idCardIdForm.idCardFontPicFileId != null) {
              this.idCardFontPicFileUrl =
                this.$baseUrl +
                "/freight/file/view/" +
                this.idCardIdForm.idCardFontPicFileId +
                "?accessToken=" +
                this.accessToken +
                "&preview=true";
            }

            if (this.idCardIdForm.idCardBackPicFileId != null) {
              this.idCardBackPicFileUrl =
                this.$baseUrl +
                "/freight/file/view/" +
                this.idCardIdForm.idCardBackPicFileId +
                "?accessToken=" +
                this.accessToken +
                "&preview=true";
            }
          }
        } else {
          this.$Message.error(res.message);
        }
      });
      //  驾照认证
      getDriverLicenseInfo({ userId: this.form.userId }).then((res) => {
        if (res.success) {
          if (res.result.id != null) {
            this.driverLicenseForm = res.result;
            // debugger;
            this.driverLicenseForm.issueDate =
              res.result.issueDate == null
                ? ""
                : res.result.issueDate.replaceAll("-", "");
            this.driverLicenseForm.startDate =
              res.result.startDate == null
                ? ""
                : res.result.startDate.replaceAll("-", "");

            this.driverLicenseForm.endDate =
              res.result.endDate == null
                ? ""
                : res.result.endDate.replaceAll("-", "");

            if (
              res.result.issuingOrganizations != "" &&
              res.result.issuingOrganizations != "null" &&
              res.result.issuingOrganizations != null
            ) {
              this.driverLicenseForm.issuingOrganizations =
                res.result.issuingOrganizations;
            } else {
              this.driverLicenseForm.issuingOrganizations = "";
            }

            if (this.driverLicenseForm.driverFontPicFileID != null) {
              this.driverFontPicFileUrl =
                this.$baseUrl +
                "/freight/file/view/" +
                this.driverLicenseForm.driverFontPicFileID +
                "?accessToken=" +
                this.accessToken +
                "&preview=true";
            }

            if (this.driverLicenseForm.driverBackPicFileID != null) {
              this.driverBackPicFileUrl =
                this.$baseUrl +
                "/freight/file/view/" +
                this.driverLicenseForm.driverBackPicFileID +
                "?accessToken=" +
                this.accessToken +
                "&preview=true";
            }
          }
        } else {
          this.$Message.error(res.message);
        }
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
      });
      // 从业资格证认证
      getWorkLicenseInfo({ userId: this.form.userId }).then((res) => {
        if (res.success) {
          if (res.result.id != null) {
            this.workLicenseForm = res.result;
            this.workLicenseForm.workLicenseExpiryTimes = new Date(
              res.result.workLicenseExpiryTime
            );
            this.workLicenseForm.workLicenseExpiryTime = this.$options.filters[
              "DATA_TIME"
            ](this.workLicenseForm.workLicenseExpiryTimes);
            if (this.workLicenseForm.workLicensePicFileId != null) {
              this.workLicensePicFileUrl =
                this.$baseUrl +
                "/freight/file/view/" +
                this.workLicenseForm.workLicensePicFileId +
                "?accessToken=" +
                this.accessToken +
                "&preview=true";
            }
          }
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    driverTabs(val) {
      if (this.driverTabPane == "name1") {
        this.spinShow = true;
        // 实名认证
        this.$refs.idCardIdForm.resetFields();
        getIdCarDInfo({ userId: this.form.userId }).then((res) => {
          if (res.success) {
            if (res.result.id != null) {
              this.idCardIdForm = res.result;
              this.idCardIdForm.startDate =
                res.result.startDate == null
                  ? ""
                  : res.result.startDate.replaceAll("-", "");
              this.idCardIdForm.endDate =
                res.result.endDate == null
                  ? ""
                  : res.result.endDate.replaceAll("-", "");
              if (this.idCardIdForm.idCardFontPicFileId != null) {
                this.idCardFontPicFileUrl =
                  this.$baseUrl +
                  "/freight/file/view/" +
                  this.idCardIdForm.idCardFontPicFileId +
                  "?accessToken=" +
                  this.accessToken +
                  "&preview=true";
              }

              if (this.idCardIdForm.idCardBackPicFileId != null) {
                this.idCardBackPicFileUrl =
                  this.$baseUrl +
                  "/freight/file/view/" +
                  this.idCardIdForm.idCardBackPicFileId +
                  "?accessToken=" +
                  this.accessToken +
                  "&preview=true";
              }
            }
          } else {
            this.$Message.error(res.message);
          }
        });
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
      } else if (this.driverTabPane == "name2") {
        this.spinShow = true;
        //  驾照认证
        this.$refs.driverLicenseForm.resetFields();
        getDriverLicenseInfo({ userId: this.form.userId }).then((res) => {
          if (res.success) {
            if (res.result.id != null) {
              this.driverLicenseForm = res.result;
              // debugger;
              this.driverLicenseForm.issueDate =
                res.result.issueDate == null
                  ? ""
                  : res.result.issueDate.replaceAll("-", "");
              this.driverLicenseForm.startDate =
                res.result.startDate == null
                  ? ""
                  : res.result.startDate.replaceAll("-", "");

              this.driverLicenseForm.endDate =
                res.result.endDate == null
                  ? ""
                  : res.result.endDate.replaceAll("-", "");

              if (
                res.result.issuingOrganizations != "" &&
                res.result.issuingOrganizations != "null" &&
                res.result.issuingOrganizations != null
              ) {
                this.driverLicenseForm.issuingOrganizations =
                  res.result.issuingOrganizations;
              } else {
                this.driverLicenseForm.issuingOrganizations = "";
              }

              if (this.driverLicenseForm.driverFontPicFileID != null) {
                this.driverFontPicFileUrl =
                  this.$baseUrl +
                  "/freight/file/view/" +
                  this.driverLicenseForm.driverFontPicFileID +
                  "?accessToken=" +
                  this.accessToken +
                  "&preview=true";
              }

              if (this.driverLicenseForm.driverBackPicFileID != null) {
                this.driverBackPicFileUrl =
                  this.$baseUrl +
                  "/freight/file/view/" +
                  this.driverLicenseForm.driverBackPicFileID +
                  "?accessToken=" +
                  this.accessToken +
                  "&preview=true";
              }
            }
          } else {
            this.$Message.error(res.message);
          }
        });

        setInterval(() => {
          this.spinShow = false;
        }, 1000);
      } else if (this.driverTabPane == "name3") {
        this.spinShow = true;
        // 从业资格证认证
        this.$refs.workLicenseForm.resetFields();
        getWorkLicenseInfo({ userId: this.form.userId }).then((res) => {
          if (res.success) {
            if (res.result.id != null) {
              this.workLicenseForm = res.result;
              this.workLicenseForm.workLicenseExpiryTimes = new Date(
                res.result.workLicenseExpiryTime
              );
              this.workLicenseForm.workLicenseExpiryTime =
                this.$options.filters["DATA_TIME"](
                  this.workLicenseForm.workLicenseExpiryTimes
                );

              if (this.workLicenseForm.workLicensePicFileId != null) {
                this.workLicensePicFileUrl =
                  this.$baseUrl +
                  "/freight/file/view/" +
                  this.workLicenseForm.workLicensePicFileId +
                  "?accessToken=" +
                  this.accessToken +
                  "&preview=true";
              }
            }
          } else {
            this.$Message.error(res.message);
          }
        });

        setInterval(() => {
          this.spinShow = false;
        }, 1000);
      }
    },
    // 点击禁用
    frozen(v) {
      this.$Modal.confirm({
        title: "确认禁用",
        content: "您确认要禁用 " + v.name + " 用户吗?",
        loading: true,
        onOk: () => {
          disableUser(v.userId).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    //启用
    Enable(v) {
      this.$Modal.confirm({
        title: "确认启用",
        content: "您确认要启用 " + v.name + " 用户吗?",
        loading: true,
        onOk: () => {
          enableUser(v.userId).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 查看车辆详细
    LookVehicleInfo(row) {
      this.VehicleDetailsModalue = true;
      this.VehicleDetailsId = row.vehicleId;
    },
    //车辆详细信息关闭
    VehicleDetailsEnd(val) {
      this.VehicleDetailsModalue = val;
      this.VehicleDetailsId = "";
    },
    //////////////////////////////////////////////////////////////////////////
    // 查看图片
    showPic(v) {
      let image = new Image();
      image.src = v;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },
    // 删除图片
    handleRemove(val) {
      if (val == 1) {
        this.idCardFontPicFileUrl = "";
      } else if (val == 2) {
        this.idCardBackPicFileUrl = "";
      } else if (val == 3) {
        this.driverFontPicFileUrl = "";
      } else if (val == 4) {
        this.driverBackPicFileUrl = "";
      } else if (val == 5) {
        this.workLicensePicFileUrl = "";
      }
    },
    // 身份证正面
    FrontIDCard(event, file, fileList) {
      this.progressAll(event, 1);
    },
    // 身份证背面
    ReverseSideIDCard(event, file, fileList) {
      this.progressAll(event, 2);
    },
    // 驾照主页
    DriverLicense(event, file, fileList) {
      this.progressAll(event, 3);
    },
    // 驾照主页
    DriverLicenPage(event, file, fileList) {
      this.progressAll(event, 4);
    },
    // 从业资格证
    QualificationCertificate(event, file, fileList) {
      this.progressAll(event, 5);
    },
    //进度条
    progressAll(data, num) {
      if (num == 1) {
        //身份证正面进度条
        this.FrontIDCardTrue = true; // 显示进度条
      } else if (num == 2) {
        //身份证背面进度条
        this.ReverseSideIDCardTrue = true; // 显示进度条
      } else if (num == 3) {
        this.DriverLicenseTrue = true;
      } else if (num == 4) {
        this.DriverLicenPageTrue = true;
      } else if (num == 5) {
        this.QualificationTrue = true;
      }
      var CardBack = setTimeout(() => {
        this.load = parseInt(data.percent); // 动态获取文件上传进度
      }, 500); // 一秒后关闭进度条
      setTimeout(() => {
        if (this.load >= 100) {
          this.load = 100;
          setTimeout(() => {
            if (num == 1) {
              this.FrontIDCardTrue = false; // 显示进度条
            } else if (num == 2) {
              this.ReverseSideIDCardTrue = false; // 显示进度条
            } else if (num == 3) {
              this.DriverLicenseTrue = false;
            } else if (num == 4) {
              this.DriverLicenPageTrue = false;
            } else if (num == 5) {
              //身份证背面进度条
              this.QualificationTrue = false;
            }
          }, 1000); // 一秒后关闭进度条
          clearTimeout(CardBack);
        }
      }, 501);
    },
    // 身份证正面
    cardFontHandleSuccess(res) {
      this.spinShow = true;
      if (res.code == 500) {
        this.$Message.error(res.message);
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        return;
      } else if (res.code == 200) {
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        this.$Message.success("上传成功");
      }

      this.idCardIdForm.name = res.result.name;
      this.idCardIdForm.num = res.result.num;
      this.idCardIdForm.birth = res.result.birth;
      this.idCardIdForm.sex = res.result.sex;
      this.idCardIdForm.nationality = res.result.nationality;
      this.idCardIdForm.address = res.result.address;
      this.idCardIdForm.idCardFontPicFileId = res.result.fileId;
      if (this.idCardIdForm.idCardFontPicFileId != null) {
        this.idCardFontPicFileUrl =
          this.$baseUrl +
          "/freight/file/view/" +
          this.idCardIdForm.idCardFontPicFileId +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
    },
    // 身份证背面
    cardBackHandleSuccess(res) {
      this.spinShow = true;
      if (res.code == 500) {
        this.$Message.error(res.message);
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        return;
      } else if (res.code == 200) {
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        this.$Message.success("上传成功");
      }
      this.idCardIdForm.startDate = res.result.startDate;

      //判断长期+99年
      if (res.result.endDate == "长期") {
        let dateNew = Number(res.result.startDate) + Number(990000);
        this.idCardIdForm.endDate = dateNew+"";
      } else {
        this.idCardIdForm.endDate = res.result.endDate;
      }

      this.idCardIdForm.issue = res.result.issue;

      this.idCardIdForm.idCardBackPicFileId = res.result.fileId;
      if (this.idCardIdForm.idCardBackPicFileId != null) {
        this.idCardBackPicFileUrl =
          this.$baseUrl +
          "/freight/file/view/" +
          this.idCardIdForm.idCardBackPicFileId +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
    },
    // 从业资格证
    workLicenesSuccess(res) {
      this.spinShow = true;
      if (res.code == 500) {
        this.$Message.error(res.message);
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        return;
      } else if (res.code == 200) {
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        this.$Message.success("上传成功");
      }
      this.workLicenseForm.workLicensePicFileId = res.result.fileId;
      if (this.workLicenseForm.workLicensePicFileId != null) {
        this.workLicensePicFileUrl =
          this.$baseUrl +
          "/freight/file/view/" +
          this.workLicenseForm.workLicensePicFileId +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      } else {
        this.$Message.error(res.message);
      }
    },
    //驾照主页
    driverFontHandleSuccess(res) {
      this.spinShow = true;
      if (res.code == 500) {
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        this.$Message.error(res.message);
        return;
      } else if (res.code == 200) {
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        this.$Message.success("上传成功");
      }
      this.driverLicenseForm.name = res.result.name;
      this.driverLicenseForm.num = res.result.num;
      this.driverLicenseForm.sex = res.result.sex;
      this.driverLicenseForm.driverType = res.result.driverType;
      this.driverLicenseForm.startDate = res.result.startDate;

      if (
        res.result.issuingOrganizations != "" &&
        res.result.issuingOrganizations != "null" &&
        res.result.issuingOrganizations != null
      ) {
        this.driverLicenseForm.issuingOrganizations =
          res.result.issuingOrganizations;
      } else {
        this.driverLicenseForm.issuingOrganizations = "";
      }

      //判断长期+99年
      if (res.result.endDate == "长期") {
        let dateNew = Number(res.result.startDate) + Number(990000);
        this.driverLicenseForm.endDate = dateNew+"";
      } else {
        this.driverLicenseForm.endDate = res.result.endDate;
      }

      this.driverLicenseForm.issueDate = res.result.issueDate;
      this.driverLicenseForm.addr = res.result.addr;
      this.driverLicenseForm.driverFontPicFileID = res.result.fileId;
      if (this.driverLicenseForm.driverFontPicFileID != null) {
        this.driverFontPicFileUrl =
          this.$baseUrl +
          "/freight/file/view/" +
          this.driverLicenseForm.driverFontPicFileID +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
    },
    // 驾照副页
    driverBackHandleSuccess(res) {
      this.spinShow = true;
      if (res.code == 500) {
        this.$Message.error(res.message);
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        return;
      } else if (res.code == 200) {
        setInterval(() => {
          this.spinShow = false;
        }, 1000);
        this.$Message.success("上传成功");
      }
      this.driverLicenseForm.name = res.result.name;
      this.driverLicenseForm.num = res.result.num;
      this.driverLicenseForm.archiveNo = res.result.archiveNo;
      this.driverLicenseForm.driverBackPicFileID = res.result.fileId;

      if (this.driverLicenseForm.driverBackPicFileID != null) {
        this.driverBackPicFileUrl =
          this.$baseUrl +
          "/freight/file/view/" +
          this.driverLicenseForm.driverBackPicFileID +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
    },
    // 驾驶员证件信息通过
    adoptDriverCertificateInformation() {
      this.$Modal.confirm({
        title: "确认通过",
        // 记得确认修改此处
        content: "确认通过 " + this.form.name + " 用户的驾驶员认证信息吗？",
        loading: true,
        onOk: () => {
          updateRegistStatus({ userId: this.form.userId, registState: 1 }).then(
            (res) => {
              this.$Modal.remove();
              if (res.success) {
                this.driverVisible = false;
                this.$Message.success("审核通过");
                this.getDataList();
              }
            }
          );
        },
      });
    },
    // 驾驶员证件信息驳回
    repulseDriverCertificateInformation() {
      this.auditFailedModal = true;
      this.AuditFailedInput = "";
      this.confirmRejection =
        "确认拒绝 " + this.form.name + " 用户的驾驶员认证信息吗？";
    },

    // 审核不通过
    auditRejectDetermine() {
      if (this.AuditFailedInput == "") {
        this.$Message.warning("请输入审核不通过原因");
        return false;
      }
      this.loadingbut = true;
      updateRegistStatus({
        userId: this.form.userId,
        registState: 0,
        reason: this.AuditFailedInput,
      }).then((res) => {
        this.loadingbut = false;
        if (res.success) {
          this.driverVisible = false;
          this.auditFailedModal = false;
          this.$Message.success("审核拒绝");
          this.getDataList();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 实名认证保存
    submitIdcardInfo() {
      this.$refs.idCardIdForm.validate((valid) => {
        if (valid) {
          if (this.idCardFontPicFileUrl == "") {
            return this.$Message.error("请上传身份证正面");
          } else if (this.idCardBackPicFileUrl == "") {
            return this.$Message.error("请上传身份证背面");
          }
          this.loadinIdcardInfo = true;
          this.idCardIdForm.userId = this.form.userId;
          saveIdCardInfo(this.idCardIdForm).then((res) => {
            this.loadinIdcardInfo = false;
            this.submitLoading = false;
            if (res.success) {
              this.$Message.success("身份证保存成功");
              this.getDataList();
              setTimeout(() => {
                this.data.forEach((item) => {
                  if (item.id == this.form.id) {
                    this.edit(item);
                  }
                });
              }, 600);
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    // 驾照认证保存
    submitDriverInfo() {
      this.$refs.driverLicenseForm.validate((valid) => {
        if (valid) {
          if (this.driverFontPicFileUrl == "") {
            return this.$Message.error("请上传驾照主页");
          } else if (this.driverBackPicFileUrl == "") {
            return this.$Message.error("请上传驾照副页");
          }
          this.loadinDriverInfo = true;
          this.driverLicenseForm.userId = this.form.userId;
          saveDriverLicenseInfo(this.driverLicenseForm).then((res) => {
            this.loadinDriverInfo = false;
            this.submitLoading = false;
            if (res.success) {
              this.$Message.success("驾驶证保存成功");
              this.getDataList();
              setTimeout(() => {
                this.data.forEach((item) => {
                  if (item.id == this.form.id) {
                    this.edit(item);
                  }
                });
              }, 600);
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    // 资格证有效期
    workLicenseEndDate(val) {
      this.workLicenseForm.workLicenseExpiryTime = val;
    },
    // 从业资格认证
    submitWorkLicenseInfo() {
      this.$refs.workLicenseForm.validate((valid) => {
        if (valid) {
          let workLicenseFormDic = {};
          if (this.workLicensePicFileUrl == "") {
          } else {
            workLicenseFormDic.workLicensePicFileId =
              this.workLicenseForm.workLicensePicFileId;
          }
          this.loadinWorkLicenseInfo = true;
          workLicenseFormDic.userId = this.form.userId;
          workLicenseFormDic.workLicenseExpiryTime =
            this.workLicenseForm.workLicenseExpiryTime;
          workLicenseFormDic.workLicenseNo = this.workLicenseForm.workLicenseNo;
          saveWorkLicenseInfo(workLicenseFormDic).then((res) => {
            this.loadinWorkLicenseInfo = false;
            this.submitLoading = false;
            if (res.success) {
              this.driverRegistStatus = 2;
              this.$Message.success("资格证保存成功");
              this.getDataList();
              setTimeout(() => {
                this.data.forEach((item) => {
                  if (item.id == this.form.id) {
                    this.edit(item);
                  }
                });
              }, 600);
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // console.log("压缩前", file); // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 文件格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
  },
  mounted() {
    this.init();
    if (localStorage.getItem("jurisdictionCargo") == "ROLE_CargOwner") {
      this.columns = this.columns.filter((col) => col.key !== "action");
    } else {
      this.columns = this.columns;
    }
  },
};
</script>
<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/table-common.less";
.popover-Tagdrverr {
  padding-top: 4px;
}
.search {
  .operation {
    margin-bottom: 2vh;
  }
  .select-count {
    font-weight: 600;
    color: #40a9ff;
  }
  .select-clear {
    margin-left: 10px;
  }
  .page {
    margin-top: 2vh;
  }
  .drop-down {
    margin-left: 5px;
  }
}
.demo-upload-list-driver {
  display: inline-block;
  width: 150px;
  height: 90px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list-driver img {
  width: 148px !important;
  height: 88.2px !important;
}
.demo-upload-list-driver-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list-driver:hover .demo-upload-list-driver-cover {
  display: block;
}
.demo-upload-list-driver-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
  line-height: 90px;
}
.demo-drawer-footer-drivle {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 16px;
  text-align: right;
  background-color: #f5f5f5;
  border: 1px solid #cdcdcd;
}
.check_font {
  font-size: 12px;
  font-weight: 600;
}
.demo-uploadcss-drivre {
  margin-top: -13px;
  width: 150px;
  height: 5px;
}

.check {
  &::before {
    content: "*";
    display: inline-block;
    margin-right: 2px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
  }
}
</style>